<template>
  <div class="forgetpass">
    <div class="forgetpass_main">
      <div class="header">
        <div class="header_main">
          <!-- <div class="header_left">淘宝高佣选品库</div> -->
          <logo></logo>
          <div class="header_action">
            <a href="#" class="action_box">
              <img :src="require('@/assets/images/man.png')" alt="" />
              <p>人工审核</p>
            </a>
            <a href="#" class="action_box">
              <img :src="require('@/assets/images/search.png')" alt="" />
              <p>实时排查</p>
            </a>
            <a href="#" class="action_box">
              <img :src="require('@/assets/images/tags.png')" alt="" />
              <p>持续更新</p>
            </a>
          </div>
        </div>
      </div>
      <div class="forgetpass_content">
        <div class="content_main">
          <div class="forgetpass_box">
            <el-card class="box-card">
              <div class="forgetpass_tabs">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                  <!-- 忘记密码 -->
                  <el-tab-pane label="忘记密码" name="forgetpass">
                    <div>
                      <el-form
                        :model="ruleForm"
                        status-icon
                        :rules="rules"
                        ref="ruleForm"
                        label-width="100px"
                        class="demo-ruleForm"
                      >
                        <el-form-item prop="phone">
                          <el-input
                            placeholder="请输入手机号码"
                            v-model.number="ruleForm.phone"
                            clearable
                            class="phonenumipt"
                          >
                            <i
                              slot="prefix"
                              style="font-size:20px;color:#666666;font-weight: bold;"
                              class="el-input__icon el-icon-mobile-phone"
                            ></i>
                          </el-input>
                        </el-form-item>
                        <el-form-item prop="code">
                          <div
                            style="display:flex;justify-content:space-between;align-items:center;width:380px;margin:0 auto;"
                          >
                            <el-input
                              placeholder="请输入验证码"
                              v-model.number="ruleForm.code"
                              clearable
                              class="phonenumipt authcode"
                            >
                              <i
                                slot="prefix"
                                style="font-size:20px;color:#666666;font-weight: bold;"
                                class="el-input__icon el-icon-chat-line-square"
                              ></i>
                            </el-input>

                            <el-button
                              @click="getCode()"
                              class="forgetpass_btn auth"
                              :class="{ 'disabled-style': getCodeBtnDisable }"
                              :disabled="getCodeBtnDisable"
                              >{{ codeBtnWord }}</el-button
                            >
                            <!-- <el-button type="primary" class="forgetpass_btn auth"
                              >获取验证码</el-button
                            > -->
                          </div>
                        </el-form-item>
                        <el-form-item prop="pass">
                          <el-input
                            type="password"
                            placeholder="请输入密码"
                            v-model.trim="ruleForm.pass"
                            autocomplete="off"
                            show-password
                            class="phonenumipt"
                          >
                            <i
                              slot="prefix"
                              style="font-size:20px;color:#666666;font-weight: bold;"
                              class="el-input__icon el-icon-lock"
                            ></i>
                          </el-input>
                        </el-form-item>
                        <el-form-item prop="checkPass">
                          <el-input
                            type="password"
                            placeholder="请再次输入密码"
                            v-model.trim="ruleForm.checkPass"
                            autocomplete="off"
                            show-password
                            class="phonenumipt"
                          >
                            <i
                              slot="prefix"
                              style="font-size:20px;color:#666666;font-weight: bold;"
                              class="el-input__icon el-icon-lock"
                            ></i
                          ></el-input>
                        </el-form-item>
                        <el-form-item>
                          <el-button
                            type="primary"
                            class="forgetpass_btn"
                            @click="submitForm('ruleForm')"
                            >提交</el-button
                          >
                        </el-form-item>
                      </el-form>
                    </div>
                    <div style="text-align:right">
                      <el-button type="text" @click="gologin"
                        >返回登录</el-button
                      >
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </el-card>
          </div>
        </div>
      </div>
      <div class="footer">
        <footerbox></footerbox>
      </div>
    </div>
    <botloading></botloading>
  </div>
</template>

<script>
// import { doEditPass, getSms } from "@/api/local/user";
import { doEditPass, getSms } from "@/api/user/user";
import botloading from "@/components/botloading.vue";
import logo from "@/components/logo.vue";
import footerbox from "@/components/footerbox.vue";

export default {
  name: "forgetpass",
  components: {
    botloading,
    logo,
    footerbox
  },
  data() {
    var checkCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("验证码不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          callback();
        }
      }, 1000);
    };
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          let reg = /^1[3456789]\d{9}$/;
          if (!reg.test(value)) {
            callback(new Error("请填写正确手机号"));
          } else {
            callback();
          }
        }
      }, 1000);
    };

    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      phonenumber: "",
      password: "",
      activeName: "forgetpass",
      type: "",
      forgetpassForm: {
        phone: "",
        pass: ""
      },
      ruleForm: {
        phone: "",
        code: "",
        pass: "",
        checkPass: "",
        email: ""
      },
      rules: {
        code: [{ validator: checkCode, trigger: "blur" }],
        phone: [{ validator: checkPhone, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }]
      },
      codeBtnWord: "获取验证码", // 获取验证码按钮文字
      waitTime: 61 // 获取验证码按钮失效时间
    };
  },
  computed: {
    // 用于校验手机号码格式是否正确
    phoneNumberStyle() {
      let reg = /^1[3456789]\d{9}$/;
      if (!reg.test(this.ruleForm.phone)) {
        return false;
      }
      return true;
    },
    // 控制获取验证码按钮是否可点击
    getCodeBtnDisable: {
      get() {
        if (this.waitTime == 61) {
          if (this.ruleForm.phone) {
            return false;
          }
          return true;
        }
        return true;
      },
      // 注意：因为计算属性本身没有set方法，不支持在方法中进行修改，而下面我要进行这个操作，所以需要手动添加
      set() {}
    }
  },
  created() {
    if (this.$route.query) {
      console.log(this.$route.query.type);
      this.type = this.$route.query.type;
    }
  },
  mounted() {},
  methods: {
    gologin() {
      if (this.type == "user") {
        this.$router.push({
          path: "/login/login"
        });
      } else {
        this.$router.push({
          path: "/login/auditlogin"
        });
      }
    },
    getCode() {
      if (this.ruleForm.phone) {
        // 调用获取短信验证码接口// type   register=注册 update-pass = 修改密码
        getSms({
          phone: this.ruleForm.phone,
          type: "update-pass"
        }).then(res => {
          console.log(res);
          if (res.code == 200) {
            this.$message({
              message: "验证码已发送，请稍候查看手机...",
              type: "success",
              center: true
            });
          }
        });
        // 因为下面用到了定时器，需要保存this指向
        let that = this;
        that.waitTime--;
        that.getCodeBtnDisable = true;
        this.codeBtnWord = `${this.waitTime}s 后重新获取`;
        let timer = setInterval(function() {
          if (that.waitTime > 1) {
            that.waitTime--;
            that.codeBtnWord = `${that.waitTime}s 后重新获取`;
          } else {
            clearInterval(timer);
            that.codeBtnWord = "获取验证码";
            that.getCodeBtnDisable = false;
            that.waitTime = 61;
          }
        }, 1000);
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    submitForm(formName) {
      var that = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log("忘记密码表单", this.ruleForm);
          doEditPass({
            phone: this.ruleForm.phone,
            password: this.ruleForm.checkPass,
            code: this.ruleForm.code
          })
            .then(res => {
              console.log(res);
              this.$message({
                message: "修改成功!",
                type: "success"
              });
              this.resetForm(formName);
              if (this.type === "user") {
                this.$router.push({
                  path: "/login/login",
                  query: { active: "login" }
                });
              }
              if (this.type === "order") {
                this.$router.push({
                  path: "/login/auditlogin",
                  query: { active: "login" }
                });
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          // console.log("error submit!!");
          that.$message.error("请检查填写内容！");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang="less" scoped>
a {
  text-decoration: none;
  color: #333;
}
.forgetpass {
  width: 100%;
  .forgetpass_main {
    // width: 1200px;
    margin: 0 auto;
    .header {
      width: 100%;
      .header_main {
        overflow: hidden;
        width: 1200px;
        height: 100px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 20px;
        padding-bottom: 25px;
        background-color: #f6f6f6;
        .header_left {
          font-size: 30px;
        }

        .header_action {
          width: 220px;
          height: 68px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 10px;
          a:last-child {
            margin-right: 0;
          }
          .action_box {
            display: inline-block;
            width: 50px;
            // height: 58px;
            margin-right: 24px;
            img {
              width: 28px;
            }
          }
        }
      }
    }
    .forgetpass_content {
      width: 100%;
      background: url("~@/assets/images/02.png") no-repeat center;
      height: 740px;
      background-position: 50% 0;
      background-size: cover;
      overflow: hidden;
      .content_main {
        width: 1200px;
        margin: 0 auto;
        position: relative;
        .forgetpass_box {
          position: absolute;
          top: 40px;
          right: 12px;
          width: 460px;
          height: 465px;
          .forgetpass_tabs::v-deep {
            .el-tabs__item.is-top {
              height: 60px;
              font-size: 18px;
              font-weight: bold;
              width: 418px;
              pointer-events: none;
            }
            .phonenumipt {
              width: 360px;
              margin: 10px;
              .el-input__inner {
                // font-weight: bold;
                height: 47px;
                box-sizing: border-box;
                background-color: #f7f8fa;
                border: 2px solid transparent;
              }
              .el-input__inner:hover {
                border: 2px solid #6183ff;
              }
            }
            .phonenumipt .authcode {
              width: 220px;
              margin: 10px;
              .el-input__inner {
                // font-weight: bold;
                height: 47px;
                box-sizing: border-box;
                background-color: #f7f8fa;
                border: 2px solid transparent;
              }
              .el-input__inner:hover {
                border: 2px solid #6183ff;
              }
            }
            .forgetpass_btn {
              margin-top: 20px;
              border-radius: 13px;
              font-size: 16px;
              padding: 17px 163px !important;
              background: linear-gradient(
                90deg,
                rgba(87, 148, 255, 1),
                rgba(107, 102, 255, 1)
              );
              transition: all 300ms ease;
            }
            .forgetpass_btn.auth {
              color: white;
              margin-top: 0px;
              border-radius: 13px;
              font-size: 16px;
              padding: 16px 19px !important;
              background: linear-gradient(
                90deg,
                rgba(87, 148, 255, 1),
                rgba(107, 102, 255, 1)
              );
              transition: all 300ms ease;
            }
            .forgetpass_btn:hover {
              transform: translateY(-5px);
              background: linear-gradient(
                90deg,
                rgba(107, 102, 255, 1),
                rgba(87, 148, 255, 1)
              );
            }
            .el-form-item__error {
              color: #f56c6c;
              font-size: 12px;
              line-height: 1;
              padding-top: 4px;
              position: absolute;
              top: 100%;
              left: 35px;
            }
            .el-form-item__content {
              line-height: 40px;
              position: relative;
              font-size: 14px;
              margin-left: 0 !important ;
            }
            .el-button.disabled-style {
              background-color: #eeeeee;
              color: white;
            }
          }
        }
      }
    }
    .footer {
      width: 100%;
      .footer_link {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 10px;
        // a {
        // }
        a:hover {
          color: blue;
        }
      }
    }
  }
}
</style>
